<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>云任务系统</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="stylesheet" type="text/css" href="css/cloud-admin.css" >
	<link rel="stylesheet" type="text/css"  href="css/themes/default.css" id="skin-switcher" >
	<link rel="stylesheet" type="text/css"  href="css/responsive.css" >
	<!-- STYLESHEETS --><!--[if lt IE 9]><script src="js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
	<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
	<!-- ANIMATE -->
	<link rel="stylesheet" type="text/css" href="css/animatecss/animate.min.css" />
	<!-- DATE RANGE PICKER -->
	<link rel="stylesheet" type="text/css" href="js/bootstrap-daterangepicker/daterangepicker-bs3.css" />
	<!-- TODO -->
	<link rel="stylesheet" type="text/css" href="js/jquery-todo/css/styles.css" />
	<!-- FULL CALENDAR -->
	<link rel="stylesheet" type="text/css" href="js/fullcalendar/fullcalendar.min.css" />
	<!-- JQUERY UI-->
	<link rel="stylesheet" type="text/css" href="js/jquery-ui-1.10.3.custom/css/custom-theme/jquery-ui-1.10.3.custom.min.css" />
	<!-- DATE RANGE PICKER -->
	<!-- DATA TABLES -->
	<link rel="stylesheet" type="text/css" href="js/datatables/media/css/jquery.dataTables.min.css" />
	<link rel="stylesheet" type="text/css" href="js/datatables/media/assets/css/datatables.min.css" />
	<link rel="stylesheet" type="text/css" href="js/datatables/extras/TableTools/media/css/TableTools.min.css" />
	<!-- FONTS -->
	<!-- JQUERY -->
	<script src="js/jquery/jquery-2.0.3.min.js"></script>
	<!--<script src="js/flot/jquery.min.js"></script>-->
	<!-- JQUERY UI-->
	<script src="js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
	<!-- BOOTSTRAP -->
	<script src="bootstrap-dist/js/bootstrap.min.js"></script>

	<!-- JQUERY UI-->
	<script src="js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>

	<!-- DATE RANGE PICKER -->
	<script src="js/bootstrap-daterangepicker/moment.min.js"></script>

	<script src="js/bootstrap-daterangepicker/daterangepicker.min.js"></script>
	<!-- SLIMSCROLL -->
	<script type="text/javascript" src="js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script>
	<!-- SLIMSCROLL -->
	<script type="text/javascript" src="js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script><script type="text/javascript" src="js/jQuery-slimScroll-1.3.0/slimScrollHorizontal.min.js"></script>
	<!-- BLOCK UI -->
	<script type="text/javascript" src="js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
	<!-- SPARKLINES -->
	<script type="text/javascript" src="js/sparklines/jquery.sparkline.min.js"></script>
	<!-- EASY PIE CHART -->
	<script src="js/jquery-easing/jquery.easing.min.js"></script>
	<script type="text/javascript" src="js/easypiechart/jquery.easypiechart.min.js"></script>
	<script type="text/javascript" src="/js//jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="/js/Highcharts-3.0.7/js/highcharts.js"></script>
	<!--&lt;!&ndash; FLOT CHARTS &ndash;&gt;-->
	<!--<script src="js/flot/jquery.flot.min.js"></script>-->
	<!--<script src="js/flot/jquery.flot.time.min.js"></script>-->
	<!--<script src="js/flot/jquery.flot.selection.min.js"></script>-->
	<!--<script src="js/flot/jquery.flot.resize.min.js"></script>-->
	<!--<script src="js/flot/jquery.flot.pie.min.js"></script>-->
	<!--<script src="js/flot/jquery.flot.stack.min.js"></script>-->
	<!--<script src="js/flot/jquery.flot.crosshair.min.js"></script>-->
	<script src="highcharts.js"></script>
	<script src="exporting.js"></script>
	<!-- SLIMSCROLL -->
	<script type="text/javascript" src="js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script><script type="text/javascript" src="js/jQuery-slimScroll-1.3.0/slimScrollHorizontal.min.js"></script>
	<!-- BLOCK UI -->
	<script type="text/javascript" src="js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
	<!-- DATA TABLES -->
	<script type="text/javascript" src="js/datatables/media/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="js/datatables/media/assets/js/datatables.min.js"></script>
	<script type="text/javascript" src="js/datatables/extras/TableTools/media/js/TableTools.min.js"></script>
	<script type="text/javascript" src="js/datatables/extras/TableTools/media/js/ZeroClipboard.min.js"></script>
	<!-- TODO -->
	<script type="text/javascript" src="js/jquery-todo/js/paddystodolist.js"></script>
	<!-- TIMEAGO -->
	<script type="text/javascript" src="js/timeago/jquery.timeago.min.js"></script>
	<!-- COOKIE -->
	<script type="text/javascript" src="js/jQuery-Cookie/jquery.cookie.min.js"></script>
	<!-- CUSTOM SCRIPT -->
	<script src="js/script.js"></script>
	<script src="js/charts.js"></script>
	<script src="scriptjs/node_mgt_user.js"></script>
</head>
    <!-- JAVASCRIPTS-->

<script>
		jQuery(document).ready(function() {	
            
            $("td").css("text-align","center");
            
            App.setPage("index");  //Set current page
			App.init(); //Initialise plugins and elements 
            Charts.initCharts();
			Charts.initPieCharts();

           
		});  
        function change(){
                //alert("change");TODO修改图标属性
            }
        function changeToTaskView(){
            //alert("!!");
            
            $("#nodeView").css("display","none");
            $("#taskView").css("display","block");
        }
        function showThreeChartsWhenViewTask(){
            $("#threeCharts").css("display","block");
        }

	</script>                                  
	<!-- /JAVASCRIPTS -->    
<body id="bodyid">
		<!-- HEADER -->
		<header class="navbar clearfix" id="header">
			<div class="container">
				<div class="navbar-brand">
					<!-- COMPANY LOGO -->
					<a href="index.html">
						<img src="img/logo/logo.png" alt="Cloud Admin Logo" class="img-responsive" height="30" width="120">
					</a>
					<!-- /COMPANY LOGO -->
					<!-- TEAM STATUS FOR MOBILE -->
					<div class="visible-xs">
						<a href="#" class="team-status-toggle switcher btn dropdown-toggle">
							<i class="fa fa-users"></i>
						</a>
					</div>
					<!-- /TEAM STATUS FOR MOBILE -->
					<!-- SIDEBAR COLLAPSE -->
					<div id="sidebar-collapse" class="sidebar-collapse btn">
						<i class="fa fa-bars"
						   data-icon1="fa fa-bars"
						   data-icon2="fa fa-bars" ></i>
					</div>
					<!-- /SIDEBAR COLLAPSE -->
				</div>
				<!-- BEGIN TOP NAVIGATION MENU -->
				<ul class="nav navbar-nav pull-right" style="min-width:30px;">
					<!-- BEGIN USER LOGIN DROPDOWN -->
					<li class="dropdown user" id="header-user" >
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<img alt="" src="img/avatars/avatar9.jpg" />
							<span class="username">王阿星</span>
							<i class="fa fa-angle-down"></i>
						</a>
						<ul class="dropdown-menu">
							<!--<li><a href="#"><i class="fa fa-user"></i> My Profile</a></li>-->
							<li><a  id="langli" ><i class="fa fa-cog"></i> 更换语言</a></li>
							<!--<li><a href=""><i class="fa fa-eye"></i> Privacy Settings</a></li>-->
							<li><a id="logout_id" href="/api/user/logout"><i class="fa fa-power-off"></i>注销</a></li>
						</ul>
					</li>
					<!-- END USER LOGIN DROPDOWN -->
				</ul>
				<!-- NAVBAR LEFT -->
				<ul class="nav navbar-nav pull-right hidden-xs" id="navbar-left" style="min-width: 0px;">
					<li class="dropdown" >
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-cog"></i>
							<span class="name" id="Skins_id">皮肤</span>
							<i class="fa fa-angle-down"></i>
						</a>
						<ul class="dropdown-menu skins">
							<li class="dropdown-title">
								<span><i class="fa fa-leaf"></i> Theme Skins</span>
							</li>
							<li><a href="#" data-skin="default">Subtle (default)</a></li>
							<li><a href="#" data-skin="night">Night</a></li>
							<li><a href="#" data-skin="earth">nEarth</a></li>
							<li><a href="#" data-skin="utopia">Utopia</a></li>
							<li><a href="#" data-skin="nature">Nature</a></li>
							<li><a href="#" data-skin="graphite">Graphite</a></li>
						</ul>
					</li>

				</ul>
				<!-- /NAVBAR LEFT -->
				<!-- END TOP NAVIGATION MENU -->
			</div>

		</header>
	<!--/HEADER -->
	<!-- PAGE -->
	<section id="page">
				<!-- SIDEBAR -->
				<div id="sidebar" class="sidebar">
					<div class="sidebar-menu nav-collapse">
						<div class="divide-20"></div>
						
						
						<!-- SIDEBAR QUICK-LAUNCH -->
						<!-- <div id="quicklaunch">
						<!-- /SIDEBAR QUICK-LAUNCH -->
						
						<!-- SIDEBAR MENU -->
						<ul>
                            <li class="active">
								<a href="node_mgt_user.html">
								<i class="fa fa-tachometer fa-fw"></i> <span class="menu-text" id="node_mgt_id">节点管理</span>
								<span class="selected"></span>
								</a>					
							</li>
                            <li class="">
								<a href="task_mgt_user.html" >
								<i class="fa fa-users" style="margin-right:11px;"></i> <span class="menu-text" id="task_mgt_id"> 任务管理</span>
								<span class="selected"></span>
								</a>					
							</li>
                            <li class="">
								<a href="his_mgt_user.html">
								<i class="fa fa-book" style="margin-right:11px;"></i> <span class="menu-text" id="his_mgt_id"> 历史任务</span>
								<span class="selected"></span>
								</a>					
							</li>
						</ul>
						<!-- /SIDEBAR MENU -->
					</div>
				</div>
				<!-- /SIDEBAR -->
		<div id="main-content">
			<!-- SAMPLE BOX CONFIGURATION MODAL FORM-->
			<div class="modal fade" id="box-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
				  <div class="modal-content">
					<div class="modal-header">
					  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					  <h4 class="modal-title">Box Settings</h4>
					</div>
					<div class="modal-body">
					  Here goes box setting content.
					</div>
					<div class="modal-footer">
					  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					  <button type="button" class="btn btn-primary">Save changes</button>
					</div>
				  </div>
				</div>
			  </div>
			<!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
			<div class="container">
				<div class="row">
					<div id="content" class="col-lg-12">
						<!-- PAGE HEADER-->
						<div class="row">
							<div class="col-sm-12">
								<div class="page-header">
									<!-- STYLER -->
									
									<!-- /STYLER -->
									<!-- BREADCRUMBS -->
									<ul class="breadcrumb">
										<li>
											<i class="fa fa-home"></i>
											<a href="node_mgt_user.html" id="home_id">主页</a>
										</li>
									</ul>
									<!-- /BREADCRUMBS -->
									<div class="clearfix">
										<h3 class="content-title pull-left" id="Dnode">节点管理</h3>
									</div>
								</div>
							</div>
						</div>
						<!-- /PAGE HEADER -->
						<!-- DASHBOARD CONTENT -->
						<div class="row">
							<!-- COLUMN 1 -->
                            
                        <!-- EXPORT TABLES-NodeView -->
						<div id="nodeView" class="row">
							<div class="col-md-12">
								<!-- BOX -->
								<div class="box border purple">
									<div class="box-title">
										<i class="fa fa-table"></i><h4 id="node_list_id">节点列表</h4>
										<div class="tools hidden-xs">

											<a href="javascript:;" class="reload" onclick="getNodeByName()">
												<i class="fa fa-refresh"></i>
											</a>

											</a>
										</div>
									</div>
									<div class="box-body">
										<table id="datatableNodeUser" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
											<thead>
												<tr>
                                                    <th id="number_id">编号</th>
													<th id="node_id">节点ID</th>
													<th id="node_name">节点名称</th>
													<th id="node_type">节点类型</th>
													<th id="node_state">节点状态</th>
													<th id="task_number">正在执行的任务数</th>
													<th id="cpu">CPU占用率</th>
													<th id="ram">内存使用率</th>
													<th id="net">带宽占用率</th>
												</tr>
											</thead>
											<tbody id="tbodyfornodelist">

											</tbody>
		
										</table>
									</div>
								</div>
								<!-- /BOX -->
							</div>
						</div>
						<!-- /EXPORT TABLES-NodeView -->
                            <!-- EXPORT TABLES-TaskView -->
							<div id="taskView" style="display:none;" class="row">
								<div class="col-md-12">
									<!-- BOX -->
									<a type="button" href="/node_mgt_user.html" style="margin-left:0.5%;margin-bottom:0.2%;font-size: large;" class="btn btn-link" data-dismiss="modal" id="back"><i class="fa fa-angle-double-left"></i> 返回</a>
									<div class="box border purple">
										<div class="box-title">
											<i class="fa fa-table"></i><h4 id="task_list">某个节点（动态显示）任务列表</h4>
											<div class="tools hidden-xs">
												<a href="javascript:;" class="reload">
													<i class="fa fa-refresh"></i>
												</a>

											</div>
										</div>
										<div class="box-body">
											<table id="datatableForTask" cellpadding="0" cellspacing="0" border="0" style="width: 100%;" class="datatable table table-striped table-bordered table-hover">
												<thead>
												<tr>
													<th id="nosort" style="text-align:center;padding:3px 3px 3px 3px;" class="" onclick="change()"><input type="checkbox" id="checkAll"></th>
													<th id="task_number1">编号</th>
													<th id="task_name1">任务名称</th>
													<th id="task_type1">任务模式</th>
													<th id="time_info1">时间信息</th>
													<th class="hidden-xs" id="resource_info">资源信息</th>
													<th style="display: none">资源信息</th>
													<th style="display: none">资源信息</th>
													<!--<th class="hidden-xs" style="visibility:hidden;" id="pid">资源信息</th>-->
													<!--<th class="hidden-xs" style="visibility:hidden;" id="task_path">资源信息</th>-->
												</tr>
												</thead>
												<tbody id="tbodyforTaskList">
												<input style="display: none" id="NodeIddForDeleteTask" value=""/>
												</tbody>
											</table>
										</div>
									</div>
									<!-- /BOX -->
								</div>
							</div>
						<!-- /EXPORT TABLES-TaskView -->
                    <!-- AUTO UPDATING CURVE-查看任务三种折线图 -->
							<div id="threeCharts" style="width:100%;display:none;">
								<div class="box border orange">
									<div class="box-title">
										<h4><i class="fa fa-signal"></i>CPU曲线图</h4>
										<div class="tools hidden-xs">
										</div>
									</div>
									<div class="box-body" id="cpucontainer">
										<!--<div id="chart_4_1" class="chart" style="width: 100%;"></div>-->
									</div>
								</div>
								<div class="box border orange" id="taskDynamicLine">
									<div class="box-title">
										<h4><i class="fa fa-signal"></i>内存曲线图</h4>
										<div class="tools hidden-xs">
										</div>
									</div>
									<div class="box-body" id="ramcontainer">
										<!--<div id="chart_4_2" class="chart" style="width: 100%;"></div>-->
									</div>
								</div>
								<div class="box border orange">
									<div class="box-title">
										<h4><i class="fa fa-signal"></i>网络带宽曲线图</h4>
										<div class="tools hidden-xs">

										</div>
									</div>
									<div class="box-body" id="netcontainer">
										<!--<div id="chart_4_3" class="chart" style="width: 100%;"></div>-->
									</div>
								</div>
							</div>
					<!-- /AUTO UPDATING CURVE -->
						<!-- SAMPLE BOX CONFIGURATION MODAL FORM-->

						<div class="modal fade" id="table-modal-showTaskSchedual" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
							  <div class="modal-content modal-table">
								<div class="modal-header">
								  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								  <h4 class="modal-title" id="time_text">任务时间信息</h4>
								</div>
								<div class="modal-body">
								  
										<table id="datatableForHisTask" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
											
											<tbody id="gettimelist">
											</tbody>
										</table>
								</div>
								<div class="modal-footer">
								  <button type="button" class="btn btn-danger" data-dismiss="modal" id="close_button">关闭</button>
								</div>
							  </div>
							</div>
						  </div>
							<div class="modal fade" id="table-modal-changeNodeName" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content modal-table">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" onclick="cleanModel()" aria-hidden="true">&times;</button>
											<h4 class="modal-title" id="node_text">修改节点名</h4>
										</div>
										<div class="modal-body">

											<table cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">

												<tbody id="changeNodeName">
												<tr>
													<th>输入修改后的名称</th>
													<th>
														<input type="text" class="form-control" name="nodeName" id="reNodeName" placeholder="输入节点名称">
														<label id="idForNodeId" style="display: none"></label>
														<!--获取taskid-->
													</th>

												</tr>

												</tbody>
											</table>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-danger" data-dismiss="modal" id="close_butto" onclick="changeNodeName()">确定</button>
											<button type="button" class="btn btn-danger" data-dismiss="modal" onclick="cleanModel()">取消</button>
										</div>
									</div>
								</div>
							</div>
							<div class="modal fade" id="table-modal-showVelocity" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content modal-table">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
											<h4 class="modal-title" id="cpu_info">CPU动态信息</h4>
										</div>
										<div class="modal-body">

											<!-- AUTO UPDATING CURVE -->
											<div class="box border orange">
												<div class="box-title">
													<div class="tools hidden-xs">

													</div>
												</div>
												<div class="box-body" style="padding-left: 0px;padding-top: 0px;padding-right: 0px;"id="cpucontain">
													<!--<div id="chart_4" class="chart" style="width: 100%;"></div>-->
												</div>
											</div>
											<!-- /AUTO UPDATING CURVE -->

										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-success" data-dismiss="modal" id="cpu_sure">确定</button>
										</div>
									</div>
								</div>
							</div>
						 
                        <div class="modal fade" id="table-modal-showresource" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
							  <div class="modal-content modal-table">
								<div class="modal-header">
								  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								  <h4 class="modal-title">XX资源信息</h4>
								</div>
								<div class="modal-body">
								  
										<table id="datatable2" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
											<thead>
												<tr>
													<th></th>
													<th></th>
													<th class="hidden-xs"></th>
												</tr>
											</thead>
											<tbody>
												
												<tr class="gradeA">
                                                     <td> CPU占用率</td>
													<td>35%</td>
													<td class="hidden-xs">Win 95+ / OSX.2+</td>
												</tr>
												<tr class="gradeA">
                                                     <td> 内存使用率</td>
													<td>22%</td>
													<td class="hidden-xs">Win 95+ / OSX.3+</td>
												
												</tr>
                                                <tr class="gradeA">
                                                     <td> 网络宽带占用率</td>
													<td>65%</td>
													<td class="hidden-xs">Win 95+ / OSX.3+</td>
												
												</tr>
												
											</tbody>
				
										</table>
								</div>
								<div class="modal-footer">
								  <button type="button" class="btn btn-success" data-dismiss="modal">确定</button>
								</div>
							  </div>
							</div>
						</div>
						<!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->	
							<div class="col-md-6" style="visibility:hidden;">
								<div class="box solid grey" style="visible:disabled;">
									<div class="box-title">
										<h4><i class="fa fa-dollar"></i>Revenue</h4>
										<div class="tools">
											<span class="label label-danger">
												20% <i class="fa fa-arrow-up"></i>
											</span>
											<a href="#box-config" data-toggle="modal" class="config">
												<i class="fa fa-cog"></i>
											</a>
											<a href="javascript:;" class="reload">
												<i class="fa fa-refresh"></i>
											</a>
											<a href="javascript:;" class="collapse">
												<i class="fa fa-chevron-up"></i>
											</a>
											<a href="javascript:;" class="remove">
												<i class="fa fa-times"></i>
											</a>
										</div>
									</div>
									<div class="box-body">
										<div id="chart-revenue" style="height:240px"></div>
									</div>
								</div>
							</div>
							<!-- /COLUMN 2 -->
						</div>
					   <!-- /DASHBOARD CONTENT -->
					   <!-- HERO GRAPH -->
						<div class="row" style="visibility:hidden;">
							<div class="col-md-12">
								<!-- BOX -->
								<div class="box border green">
									<div class="box-title">
										<h4><i class="fa fa-bars"></i> <span class="hidden-inline-mobile">Traffic & Sales</span></h4>
									</div>
									<div class="box-body">
										<div class="tabbable header-tabs">
											<ul class="nav nav-tabs">
												 <li><a href="#box_tab2" data-toggle="tab"><i class="fa fa-search-plus"></i> <span class="hidden-inline-mobile">Select & Zoom Sales Chart</span></a></li>
												 <li class="active"><a href="#box_tab1" data-toggle="tab"><i class="fa fa-bar-chart-o"></i> <span class="hidden-inline-mobile">Traffic Statistics</span></a></li>
											 </ul>
											 <div class="tab-content">
												 <div class="tab-pane fade in active" id="box_tab1">
													<!-- TAB 1 -->
													<div id="chart-dash" class="chart"></div>
													<hr class="margin-bottom-0">
												   <!-- /TAB 1 -->
												 </div>
												 <div class="tab-pane fade" id="box_tab2">
													<div class="row">
														<div class="col-md-8">
															<div class="demo-container">
																<div id="placeholder" class="demo-placeholder"></div>
															</div>
														</div>
														<div class="col-md-4">
															<div class="demo-container" style="height:100px;">
																<div id="overview" class="demo-placeholder"></div>
															</div>
															<div class="well well-bottom">
																<h4>Month over Month Analysis</h4>
																<ol>
																	<li>Selection support makes it easy to construct flexible zooming schemes.</li>
																	<li>With a few lines of code, the small overview plot to the right has been connected to the large plot.</li>
																	<li>Try selecting a rectangle on either of them.</li>
																</ol>
															</div>
														</div>
													</div>
												</div>
											 </div>
										</div>
									</div>
								</div>
								<!-- /BOX -->
							</div>
						</div>
						<!-- /HERO GRAPH -->
						<!-- NEW ORDERS & STATISTICS -->
						
						<!-- /NEW ORDERS & STATISTICS -->
						<!-- CALENDAR & CHAT -->
						
						<div class="footer-tools">
							<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
						</div>
					</div><!-- /CONTENT-->
				</div>
			</div>
		</div>
	</section>
	<!--/PAGE -->
</body>
<!--<script>-->
	<!--var timer;-->
	<!--var chart;-->
	<!--var data = new Array(null, null, null, null, null,null, null, null, null, null, null, null,null, null, null, null, null,null, null, null, null, null, null, null);-->
	<!--jQuery(document).ready(function() {-->

		<!--//$("th").removeClass();-->
		<!--App.setPage("index");  //Set current page-->
		<!--App.init(); //Initialise plugins and elements-->
		<!--//Charts.initCharts();-->
<!--//			$('#datatable2 tbody').on( 'click', 'tr', function () {-->
<!--//				$(this).toggleClass('selected');-->
<!--//			} );-->
	<!--});-->
	<!--$('#table-modal-showVelocity').on('hidden.bs.modal', function () {//模态框关闭时重新初始化-->
		<!--// 执行一些动作...-->
		<!--alert("模态框关闭了");-->
		<!--chart=null;-->
		<!--clearInterval(timer);-->
		<!--//data = new Array(null, null, null, null, null,null, null, null, null, null, null, null,null, null, null, null, null,null, null, null, null, null, null, null);-->
	<!--});-->
	<!--function clickbutton(obj){//查看cpu折线图-->
		<!--var nodeid=obj.id;-->
		<!--$("#table-modal-showVelocity").modal("show");-->
		<!--chart = new Highcharts.Chart({-->
			<!--chart: {-->
				<!--//将报表对象渲染到层上-->
				<!--renderTo: 'cpucontain',-->
				<!--type: 'spline',-->
				<!--animation: Highcharts.svg, // don't animate in old IE-->
				<!--events: {-->
					<!--load: function () {-->
						<!--// set up the updating of the chart each second-->
						<!--var series = this.series[0];-->
						<!--timer=setInterval(function () {-->
							<!--$.ajax({-->
								<!--type: "POST",-->
								<!--url: "http://localhost:8080/api/node/getOnePerformance",-->
								<!--data:{nodeId:nodeid,number:"1"},-->
								<!--async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置-->
								<!--success: function(result){-->
									<!--var x = (new Date()).getTime(), // current time-->
											<!--y = result.data;-->
									<!--series.addPoint([x, y], true, true);-->
<!--//									data.shift();//去除第一个元素-->
<!--//									data.push([result.data]);-->
<!--//									chart.series[0].setData(data);-->
<!--//									$("tspan").css("visibility","hidden");-->
<!--//									$(".highcharts-container").css("width","95%");-->
								<!--}-->
							<!--}, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示-->

						<!--}, 1000);-->
					<!--}-->
				<!--}-->
			<!--},-->

			<!--legend: {-->
				<!--enabled: false-->
			<!--},-->
			<!--exporting: {-->
				<!--enabled: false-->
			<!--},-->
			<!--//设定报表对象的初始数据-->
			<!--series: [{-->
				<!--name: 'CPU占用率',-->
				<!--data: (function() {-->
					<!--// generate an array of random data-->
					<!--var data = [],-->
							<!--time = (new Date()).getTime(),-->
							<!--i;-->
					<!--for (i = -23; i <= 0; i++) {-->
						<!--data.push({-->
							<!--x: time + i * 1000,-->
							<!--y: null-->
						<!--});-->
					<!--}-->
					<!--return data;-->
				<!--})()-->
			<!--}]-->
		<!--});-->
		<!--$(".highcharts-container").css("width","95%");-->
		<!--$("tspan").css("visibility","hidden");-->
		<!--function getForm(){-->
			<!--$.ajax({-->
				<!--type: "POST",-->
				<!--url: "http://localhost:8080/api/node/getOnePerformance",-->
				<!--data:{nodeId:nodeid,number:"1"},-->
				<!--async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置-->
				<!--success: function(result){-->
					<!--data.shift();//去除第一个元素-->
					<!--data.push([result.data]);-->
					<!--chart.series[0].setData(data);-->
					<!--$("tspan").css("visibility","hidden");-->
					<!--$(".highcharts-container").css("width","95%");-->
				<!--}-->
			<!--}, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示-->
		<!--}-->
		<!--//$(document).ready(function() {-->
		<!--//每隔1秒自动调用方法，实现图表的实时更新-->
		<!--//timer=window.setInterval(getForm,1000);-->
	<!--}-->
	<!--function clickRambutton(obj){//查看内存折线图-->
		<!--var nodeid=obj.id;-->
		<!--$("#table-modal-showVelocity").modal("show");-->
		<!--chart = new Highcharts.Chart({-->
			<!--chart: {-->
				<!--//将报表对象渲染到层上-->
				<!--renderTo: 'cpucontain',-->
				<!--type: 'spline',-->
				<!--animation: Highcharts.svg, // don't animate in old IE-->
				<!--events: {-->
					<!--load: function () {-->
						<!--// set up the updating of the chart each second-->
						<!--var series = this.series[0];-->
						<!--timer=setInterval(function () {-->
							<!--$.ajax({-->
								<!--type: "POST",-->
								<!--url: "http://localhost:8080/api/node/getOnePerformance",-->
								<!--data:{nodeId:nodeid,number:"2"},-->
								<!--async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置-->
								<!--success: function(result){-->
									<!--var x = (new Date()).getTime(), // current time-->
											<!--y = result.data;-->
									<!--series.addPoint([x, y], true, true);-->
<!--//									data.shift();//去除第一个元素-->
<!--//									data.push([result.data]);-->
<!--//									chart.series[0].setData(data);-->
<!--//									$("tspan").css("visibility","hidden");-->
<!--//									$(".highcharts-container").css("width","95%");-->
								<!--}-->
							<!--}, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示-->

						<!--}, 1000);-->
					<!--}-->
				<!--}-->
			<!--},-->

			<!--legend: {-->
				<!--enabled: false-->
			<!--},-->
			<!--exporting: {-->
				<!--enabled: false-->
			<!--},-->
			<!--//设定报表对象的初始数据-->
			<!--series: [{-->
				<!--name: 'CPU占用率',-->
				<!--data: (function() {-->
					<!--// generate an array of random data-->
					<!--var data = [],-->
							<!--time = (new Date()).getTime(),-->
							<!--i;-->
					<!--for (i = -23; i <= 0; i++) {-->
						<!--data.push({-->
							<!--x: time + i * 1000,-->
							<!--y: null-->
						<!--});-->
					<!--}-->
					<!--return data;-->
				<!--})()-->
			<!--}]-->
		<!--});-->
		<!--$(".highcharts-container").css("width","95%");-->
		<!--$("tspan").css("visibility","hidden");-->
		<!--function getForm(){-->
			<!--$.ajax({-->
				<!--type: "POST",-->
				<!--url: "http://localhost:8080/api/node/getOnePerformance",-->
				<!--data:{nodeId:nodeid,number:"1"},-->
				<!--async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置-->
				<!--success: function(result){-->
					<!--data.shift();//去除第一个元素-->
					<!--data.push([result.data]);-->
					<!--chart.series[0].setData(data);-->
					<!--$("tspan").css("visibility","hidden");-->
					<!--$(".highcharts-container").css("width","95%");-->
				<!--}-->
			<!--}, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示-->
		<!--}-->
		<!--//$(document).ready(function() {-->
		<!--//每隔1秒自动调用方法，实现图表的实时更新-->
		<!--//timer=window.setInterval(getForm,1000);-->
	<!--}-->
	<!--function clickNetbutton(obj){//查看网络折线图-->
		<!--var nodeid=obj.id;-->
		<!--$("#table-modal-showVelocity").modal("show");-->
		<!--chart = new Highcharts.Chart({-->
			<!--chart: {-->
				<!--//将报表对象渲染到层上-->
				<!--renderTo: 'cpucontain',-->
				<!--type: 'spline',-->
				<!--animation: Highcharts.svg, // don't animate in old IE-->
				<!--events: {-->
					<!--load: function () {-->
						<!--// set up the updating of the chart each second-->
						<!--var series = this.series[0];-->
						<!--timer=setInterval(function () {-->
							<!--$.ajax({-->
								<!--type: "POST",-->
								<!--url: "http://localhost:8080/api/node/getOnePerformance",-->
								<!--data:{nodeId:nodeid,number:"3"},-->
								<!--async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置-->
								<!--success: function(result){-->
									<!--var x = (new Date()).getTime(), // current time-->
											<!--y = result.data;-->
									<!--series.addPoint([x, y], true, true);-->
<!--//									data.shift();//去除第一个元素-->
<!--//									data.push([result.data]);-->
<!--//									chart.series[0].setData(data);-->
<!--//									$("tspan").css("visibility","hidden");-->
<!--//									$(".highcharts-container").css("width","95%");-->
								<!--}-->
							<!--}, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示-->

						<!--}, 1000);-->
					<!--}-->
				<!--}-->
			<!--},-->

			<!--legend: {-->
				<!--enabled: false-->
			<!--},-->
			<!--exporting: {-->
				<!--enabled: false-->
			<!--},-->
			<!--//设定报表对象的初始数据-->
			<!--series: [{-->
				<!--name: 'CPU占用率',-->
				<!--data: (function() {-->
					<!--// generate an array of random data-->
					<!--var data = [],-->
							<!--time = (new Date()).getTime(),-->
							<!--i;-->
					<!--for (i = -23; i <= 0; i++) {-->
						<!--data.push({-->
							<!--x: time + i * 1000,-->
							<!--y: null-->
						<!--});-->
					<!--}-->
					<!--return data;-->
				<!--})()-->
			<!--}]-->
		<!--});-->
		<!--$(".highcharts-container").css("width","95%");-->
		<!--$("tspan").css("visibility","hidden");-->
		<!--function getForm(){-->
			<!--$.ajax({-->
				<!--type: "POST",-->
				<!--url: "http://localhost:8080/api/node/getOnePerformance",-->
				<!--data:{nodeId:nodeid,number:"1"},-->
				<!--async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置-->
				<!--success: function(result){-->
					<!--data.shift();//去除第一个元素-->
					<!--data.push([result.data]);-->
					<!--chart.series[0].setData(data);-->
					<!--$("tspan").css("visibility","hidden");-->
					<!--$(".highcharts-container").css("width","95%");-->
				<!--}-->
			<!--}, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示-->
		<!--}-->
		<!--//$(document).ready(function() {-->
		<!--//每隔1秒自动调用方法，实现图表的实时更新-->
		<!--//timer=window.setInterval(getForm,1000);-->
	<!--}-->

<!--</script>-->
</html>
